{extend name="default/template/base_index"/}


{block name="area_header"}
    <!--<script type="text/javascript" charset="utf-8" src="__CDN__/ueditor/1.4.3/ueditor.config.js"></script>-->
    <!--<script type="text/javascript" charset="utf-8" src="__CDN__/ueditor/1.4.3/ueditor.all.min.js"> </script>-->

    <link type="text/css" rel="stylesheet" href="__CDN__/comp/wxuploader.css?v=__APP_VERSION__"/>
    <link type="text/css" rel="stylesheet" href="__CDN__/jquery-uploadify/3.2.1/uploadify.css"/>
    <link rel="stylesheet" type="text/css" media="all" href="__CDN__/jquery-datetimepicker/jquery.datetimepicker.css">
    <script type="text/javascript" src="__CDN__/jquery-datetimepicker/jquery.datetimepicker.js"></script>
    <style type="text/css">
        .banner.wxuploaderimg .img-preview img {
            width: 320px;
            height: 150px;
        }
    </style>

    <link type="text/css" rel="stylesheet" href="__CDN__/select2/4.0.0/css/select2.min.css"/>
    <style type="text/css">
        .select2-container--default .select2-selection--single .select2-selection__placeholder {
            color: #E7E7E7;
        }

        .select2-container--default .select2-selection--single {
            background-color: #2780e3;
            border: 0px solid #aaa;
            border-radius: 4px;
        }

        .select2-container {
            background: #2780e3;
            color: #fff;
            padding: 2px;
            margin: 0px;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #F5F5F5;
        }

        .select2-container--default .select2-search--dropdown .select2-search__field {
            color: #444;
        }

        .wxnumber-item {
            background: #DFC2C2;
            width: auto;
            display: inline-block;
            padding: 5px;
            margin: 5px;
        }

        .wxnumber-item i.fa {
            margin: 0px 5px;
            cursor: pointer;
        }

        .modal-backdrop, .modal-dialog {
            z-index: 0;
        }

        .tangram-suggestion-main {
            z-index: 123456789;
        }
    </style>
{/block}

{block name="area_body"}
    {include file="default/Widget/topbar" /}
    <div class="admin-main container-fluid">
        {include file="default/Widget/left" /}
        <div class="admin-main-content">
            {include file="default/Widget/breadcrumb" /}

            <!-- 带验证 form -->
            <form class="form-horizontal well validateForm">
                <fieldset>
                    <legend>
                        创建店铺
                    </legend>
                    <div class="form-group">
                        <label for="inputtitle" class="col-md-2 col-lg-2 control-label">店铺名称</label>
                        <div class="col-md-10 col-lg-10">
                            <input type="text" class="required form-control input-short input-sm" name="name" id="inputtitle"
                                   placeholder="请输入店铺名称">
                            <div class="help-block">(店铺名称)</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputservice_phone" class="col-md-2 col-lg-2 control-label">店铺主微信号：</label>
                        <div class="col-md-10 col-lg-10">
                            <input type="text" class="required form-control input-short input-sm" name="wxno" id=""
                                   placeholder="请输入店铺主微信号">
                            <div class="help-block">(请输入店铺微信号，可在微信的个人中心查看)</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputservice_phone" class="col-md-2 col-lg-2 control-label">客服电话</label>
                        <div class="col-md-10 col-lg-10">
                            <input type="text" class="required form-control input-short input-sm" name="service_phone"
                                   id="inputservice_phone" placeholder="请输入客服电话">
                            <div class="help-block">(请输入客服电话)</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputtitle" class="col-md-2 col-lg-2 control-label">店铺logo</label>
                        <div class="col-md-10 col-lg-10">
                            <input type="hidden" class="required form-control input-short" name="logo" id="inputlogo"
                                   placeholder="请输入店铺logo、头像。">
                            <div class="wxuploaderimg clearfix logo" data-maxitems="1">
                                <div class="img-preview clearfix">
                                </div>
                                <div class="add">
                                    <i class="fa fa-plus"></i>
                                </div>
                            </div>
                            <div class="help-block">(请上传店铺logo或头像,建议尺寸：120像素 * 120像素,,50KB以下)</div>
                        </div>
                    </div>

                    <div class="form-group baidumap_position">
                        <label for="inputtitle" class="col-md-2 col-lg-2 control-label">店铺经纬度</label>
                        <div class="col-md-10 col-lg-10">
                            经度<input type="text" value="" name="lng" class="lng"/>纬度<input type="text" value="" name="lat" class="lat"/>
                            <button type="button" class="js_baidumap btn btn-primary btn-sm" data-toggle="modal"
                                    data-target="#baidumap">点击选择百度地图
                            </button>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="inputtitle" class="col-md-2 col-lg-2 control-label">店铺简介</label>
                        <div class="col-md-5 col-lg-5">
                            <textarea name="notes" class="form-control" rows="5" cols="30"></textarea>
                            <div class="help-block">(您可以输入店铺简介)</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 col-lg-2 control-label">&nbsp;</label>
                        <div class="col-lg-10 col-md-10">
                            <a target-form="validateForm" class="ajax-post btn btn-primary btn-sm" onclick="return getData();"
                               href="{:url('Store/add')}" autofocus="autofocus"><i class="fa fa-save"></i>
                                {:L('BTN_SAVE')}</a>
                            <a class="btn btn-primary btn-sm" href="{:url('Store/index')}"><i
                                    class="fa fa-times-circle"></i> {:L('BTN_CANCEL')}</a>
                        </div>
                    </div>
                </fieldset>
            </form>
            <!-- form -->

            <script type="text/javascript" src="__CDN__/select2/4.0.0/js/select2.min.js"></script>
            <script type="text/javascript" src="__CDN__/select2/4.0.0/js/i18n/zh-CN.js"></script>
            <script type="text/javascript" src="__CDN__/jquery-uploadify/3.2.1/jquery.uploadify.min.js"></script>
            {include file="default/template/wxpicture"/}

            {include file="default/template/baidumap"/}

        </div>
        <!-- END admin-main-content -->
    </div>
    <!-- END admin-main-->
{/block}

{block name="area_footer"}

    <script type="text/javascript">
        $('.startdatetime').datetimepicker({
            lang: 'ch',
            format: 'Y-m-d H:i:s',
            timepicker: false,
        });
        $('.enddatetime').datetimepicker({
            lang: 'ch',
            format: 'Y-m-d  H:i:s',
            timepicker: false,
        });
    </script>
    <script type="text/javascript">

        function getData() {
            var logo = $(".wxuploaderimg.logo img").attr("data-imageid");
            var banner = $(".wxuploaderimg.banner img").attr("data-imageid");

            $("#inputlogo").val(logo);
            $("#inputbanner").val(banner);

            $("#inputweixin_number_name").val("");
            $(".js_weixin_number_list .wxnumber-item").each(function (index, item) {
                var text = "";
                $("#inputweixin_number_name").val($("#inputweixin_number_name").val() + $(item).text() + ",");

            });
            return true;
        }
        function appendWeixinNumber(weixin, openid) {
            var len = $("#inputweixin_number").val().split(",").length - 1;

            if (len > 5) {
                $.scojs_message("不能超过5个！", $.scojs_message.TYPE_ERROR);
                return;
            }
            $("#inputweixin_number").val($("#inputweixin_number").val() + openid + ",");

//		console.log(weixin);
            $cont = $(".js_weixin_number_list");
            $item = $("<div class='wxnumber-item'>" + weixin + "<i class='fa fa-times js_removed'></i></div>");
            $cont.append($item);
            $item.attr("data-id", openid);
        }
        function removeWeixinNumber(ele) {
//		console.log(ele);
            var str = $("#inputweixin_number").val();
            var openid = ele.attr("data-id");
            $("#inputweixin_number").val(str.replace(openid + ",", ""));
            ele.remove();
            $cont = $(".js_weixin_number_list");
        }
        $(function () {
            $(".js_weixin_number_list").click(function (ev) {
                $ele = $(ev.target);
                if ($ele.hasClass("js_removed")) {
                    removeWeixinNumber($ele.parent());
                }
            });

            wxuploadimg.init({cont: ".wxuploaderimg"});

            $(".baidumap_position").baidumap();


            $("#user_select2").select2({
                placeholder: "输入用户id或昵称查询",
                language: "zh-CN",
                ajax: {
                    url: "{:url('Wxuser/select')}",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        var queryParameters = {
                            q: params.term
                        }
                        return queryParameters;

                    },
                    processResults: function (data, page) {
                        if (!data.info) {
                            data.info = new Array();
                            data.info['nodata'] = "无相关数据";
                        }
                        // parse the results into the format expected by Select2.
                        // since we are using custom formatting functions we do not need to
                        // alter the remote JSON data
                        return {
                            results: data.info
                        };
                    },
                    cache: true
                },
                minimumInputLength: 0,
                templateSelection: function (repo) {
                    var selection = repo.nickname || repo.text;
                    if (repo.nickname) {
                        var openid = repo.openid;
                        console.log(repo);
                        if ($("#inputweixin_number").val().indexOf(openid) === -1) {
                            appendWeixinNumber(selection, openid);
                        }
                    }
                    return selection;
                },
                templateResult: function (repo) {

                    if (repo.loading) return repo.text;
                    if (repo.nodata) return repo.nodata;
//    				var markup = '<div>'+repo.nickname+'</div>';
                    var markup = '<div><img src="' + repo.avatar + '" style="width:30px;height:30px;"/>[id:' + repo.id + '] ' + repo.nickname + '</div>';
                    return markup;
                },
            });

        })
    </script>
{/block}